<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<view class="title">密码找回</view>
			<u-steps class="u-p-b-50" :list="numList" :current="stepListCurrent" mode="number" active-color="#fcbd71"></u-steps>
			<block v-if="stepListCurrent==-1 && accountIsPhone" class="">
				<input class="u-border-bottom" type="text" v-model="account" placeholder="账号/手机号" />
				<button @click="firstClick" :style="[firstInputStyle]" class="getCaptcha">下一步</button>
				<!-- <u-button class="u-m-b-30" type="success" size="mini"  @click="getCode">{{codeTips}} </u-button> -->
			</block>
			
			<block v-if="!accountIsPhone">
				<view class="u-p-b-10" style="font-size: 60rpx;fonw">填写手机号</view>
				<view class="u-p-b-30">
					请填写出完整的手机号
					<text style="color: #F29100;">{{yzmPhone}}</text>
					以验证身份
				</view>
				<view >
					
					<input v-model="phone" class="u-border-bottom u-p-t-20" type="text" placeholder="请输入手机号">
				</view>
				
				<button @click="firstTowClick" :style="[firstTowInputStyle]" class="getCaptcha">下一步</button>
			</block>
			
			
			<block v-if="stepListCurrent==0  && accountIsPhone">
				<view class="u-p-b-10" style="font-size: 60rpx;fonw">输入短信验证码</view>
				<view class="u-p-b-30 u-flex u-row-between">
					向
					<text class="u-p-l-3 u-p-r-3" style="color: #F29100;">{{yzmPhone}}</text>
					发送验证码<u-button  @click="yzmBtn"  type="warning" size="mini">{{yzmTip}}</u-button>
					<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
				</view>
				<view>
					<u-message-input mode="middleLine" v-model="yzm" :breathe="false" @finish="finish" :focus="false"></u-message-input>
					
					<!-- <input v-model="yzm" class="u-border-bottom u-p-t-20" type="text" placeholder="请输入验证码"> -->
				</view>
				
				<button @click="secondClick" :style="[secondInputStyle]" class="getCaptcha">提交</button>
			</block>
			
			<block v-if="stepListCurrent==1  && accountIsPhone">
				<view class="u-border-bottom u-p-t-20  u-flex">
					<view class="u-p-b-18" style="font-size: 30rpx;">新密码</view>
					<u-input v-model="password" class="u-p-l-70" type="password" :password-icon="true" placeholder="请设置新密码"/>
				</view>
				<view class="u-border-bottom u-p-t-20  u-flex">
					
					<view class="u-p-b-18" style="font-size: 30rpx;">确认密码</view>
					<u-input v-model="password_confirm" class="u-p-l-40" type="password" :password-icon="true" placeholder="请再次输入新密码"/>
				</view>
				<view>
					<view style="color: #c8c9cc;">
						<u-icon name="info-circle-fill" size="30" color="#c8c9cc"></u-icon>密码由6-16位数字、字母或符号组成
					</view>
					<view style="color: #c8c9cc;">
						<u-icon name="info-circle-fill" size="30" color="#c8c9cc"></u-icon>至少含2种以上字符
					</view>
					
				</view>
				<button @click="thirdClick" :style="[thirdInputStyle]" class="getCaptcha u-m-t-40">提交</button>
			</block>

			<block  v-if="stepListCurrent==3  && accountIsPhone">
				<u-button @click="fourthClick"  type="warning">快去试试新密码吧</u-button>
			</block>
			

		</view>
		<view class="buttom">

		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			numList: [{
				name: '账号验证'
			}, {
				name: '获取验证码'
			}, {
				name: '重置密码'
			}, {
				name: '重置成功'
			},  ],
			stepListCurrent:-1,
			account: '',
			password:'',
			password_confirm:'',
			yzmPhone:'',
			yzm:'',
			phone:'',
			accountIsPhone:true,
			yzmTip:'',
		}
	},

	computed: {
		
		firstInputStyle() {
			let style = {};
			if(this.account.length >= 5) {
				style.color = "#fff";
				style.backgroundColor = this.$u.color['warning'];
			}
			return style;
		},
		firstTowInputStyle(){
			let style = {};
			if(this.phone.length == 11) {
				style.color = "#fff";
				style.backgroundColor = this.$u.color['warning'];
			}
			return style;
		},
		secondInputStyle(){
			let style = {};
			if(this.yzm.length == 4) {
				style.color = "#fff";
				style.backgroundColor = this.$u.color['warning'];
			}
			return style;
		},
		thirdInputStyle(){
			let style = {};
			if(this.password.length == this.password_confirm.length && this.password.length >= 6 && this.password.length <= 16 && this.password_confirm.length >= 6 && this.password_confirm.length <= 16) {
				style.color = "#fff";
				style.backgroundColor = this.$u.color['warning'];
			}
			return style;
		}
	},
	async onLoad(){
		this.yzmTip = '获取验证码'

	},
	methods: {
		fourthClick(){
			this.$u.route({
				type:"redirect",
				url:"/pages/auth/login",
				params:{account:this.phone}
			})
		},
		async thirdClick(){
			if(this.password == this.password_confirm){
				const params = {
					account: null,
					tel: this.phone,
					pwd: this.password
				}
				
				const res = await this.$u.api.resetPasswd(params)
				if(!this.$u.test.isEmpty(res)){
					this.$u.toast("密码重置成功")
					this.stepListCurrent = 3
				}else{
					this.$u.toast("密码重置失败,请重试")
				}
				
			}else{
				this.$u.toast("两次密码不同,请重试")
				return
			}
		},
		codeChange(text) {
			this.yzmTip = text;
		},
		async yzmBtn(){
			if(this.$refs.uCode.canGetCode) {
				// 向后端请求验证码
				
				const res = await this.$u.api.sendYzm(this.phone);
				if(!this.$u.test.isEmpty(res)){
					if(res.indexOf("发送成功")>0){
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 2000);
					}else{
						this.$u.toast('发送失败');
						return
					}
					
				}else{
					this.$u.toast('请求失败');
					return
				}
				// uni.showLoading({
				// 	title: '正在获取验证码',
				// 	mask: true
				// })
				
				
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
			
		},
		finish(e){
			// console.log('输入结束，当前值为：' + e);
			// 获取用户输入的验证码
			this.yzm = e
			if(this.yzm.length == 4){
				this.firstSuccess = false
			}
			
		},
		async secondClick(){
			//  提交验证码  判断  是否正确 在跳转
			const res = await this.$u.api.varifyYzm(this.phone,this.yzm)
			if(res == true){
				this.$u.toast("验证成功")
				setTimeout(() => {
					this.stepListCurrent = 1
					
				}, 1000);
				
			}
			
			
		},
		async firstTowClick(){
			if(!this.phone ) return
			const res = await this.$u.api.judgePhoneIsTheAccount(this.account,this.phone)
			if(this.$u.test.isEmpty(res)){
				this.$u.toast("验证有误")
				return
			}else{
				
				
				if(res == this.phone){
					
					this.stepListCurrent = 0
					this.accountIsPhone = true
				}
				else{
					this.accountIsPhone = false
				}
				
			}
		},
		async firstClick() {
			if(!this.account ) return
			const res = await this.$u.api.returnPhone(this.account)
			if(this.$u.test.isEmpty(res)){
				this.$u.toast("该账号或手机号尚未注册")
				return
			}else{
				this.yzmPhone = res
				console.log(res)
				let str = this.account.substring(0,3)+ "****" + this.account.substring(7,this.account.length)
				if(res == str){
					this.phone = this.account
					this.stepListCurrent = 0
					this.accountIsPhone = true
				}
				else{
					this.accountIsPhone = false
				}
				
			}
			
		},
		toRegister(){
			this.$u.route({
				type:'navigateTo',
				url:'pages/auth/register'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.u-border-bottom{
		margin-bottom: 40rpx !important;
		border-bottom: 1px solid #ccc;
	}
	.wrap {
		font-size: 28rpx;
		.content {
			width: 600rpx;
			margin: 80rpx auto 0;

			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}
			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}
			.tips {
				color: $u-type-info;
				margin-bottom: 60rpx;
				margin-top: 8rpx;
			}
			.getCaptcha {
				background-color: rgb(253, 243, 208);
				color: $u-tips-color;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;
				
				&::after {
					border: none;
				}
			}
			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}
		.buttom {
			.loginType {
				display: flex;
				padding: 350rpx 150rpx 150rpx 150rpx;
				justify-content:space-between;
				
				
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: $u-content-color;
					font-size: 28rpx;
				}
			}
			
			.hint {
				
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $u-tips-color;
				
				.link {
					color: $u-type-warning;
				}
			}
		}
	}
</style>
